<template>
	<view>
		<!-- 导航栏 -->
		<view class="navigation-bar">
			<view class="headline-box">
				<image src="../../../static/Myimg/zuo1.png" @click="returnOne" class="return-a" mode=""></image>
				<view class="headlines">
					{{headline}}
				</view>
			</view>
			<image src="../../../static/icon/more.png" class="extend-a" mode=""></image>
		</view>
		<view class="konggei"></view>
		<!-- 发货信息-->
		<view class="shipping-information-box">
			<view class="information-box">
				{{delivers}}
			</view>
			<view class="information-title">
				{{deliveryTime}}
			</view>
		</view>
		<!-- 订单内容-->
		<view class="order-box">
			<!-- 店名加头像-->
			<view class="order-merchant">
				<image :src="merchantImage" mode="" class="merchant-image"></image>
				<view class="merchant-name">
					{{merchantName}}
				</view>
				<image src="../../../static/Myimg/right.png" mode="" class="image-right"></image>
			</view>
			<view v-for="(item,index) in orders" :key="index" class="order-detail">
				<image :src="item.shopImage" mode="" class="shop-image"></image>
				<view class="order-all-box">
					<view class="shop-content">
						<view class="shop-content-title">
							{{item.priductName}}
						</view>
						<view class="priduct-price">
							￥{{item.productPrice}}
						</view>
					</view>
					<view class="commercial-specification-box">
						<view class="commercial-specification">
							{{item.attributes}}
						</view>
						<view class="quantity-of-commodity">
							×{{item.shopCommodity}}
						</view>
					</view>
					<view class="Rules-of-delivery">
						<view class="Quick-refund">
							极速退款
						</view>
						<view class="seven-days-no-reason-to-return">
							7天无理由退货
						</view>
						<view class="A-late-start-pays-off">
							晚发必赔
						</view>
					</view>
				</view>
			</view>
			<view class="actually-paid-box">
				<view class="actually-paid-title">
					实付
					<view class="actually-paid-price">
						￥{{actuallyPaidPrice}}
					</view>
					<image src="../../../static/icon/icon0.png" mode="" class="bottom-image"></image>
				</view>
			</view>
		</view>
		<!-- 服务保障-->
		<view class="service-assurance">
			<view class="service-assurance-title">
				<image src="../../../static/icon/cosmetic.png" class="service-assurance-image" mode=""></image>
				我的服务保障中
			</view>
			<view class="service-assurance-box">
				<view class="late-start-pays-off-box">
					<view class="late-start-pays-off-script">
						<view class="late-start-pays-off">
							晚发必赔
						</view>
						<image src="../../../static/Myimg/not.png" mode="" class="late-start-pays-off-image"></image>
					</view>
					<view class="late-start-pays-off-end">
						{{StateOfGuarantee}}
					</view>
				</view>
				<view class="invoice-information-box">
					<view class="invoice-information-script">
						<view class="late-start-pays-off">
							发票信息
						</view>
						<image src="../../../static/Myimg/not.png" mode="" class="late-start-pays-off-image"></image>
					</view>
					<view class="invoice-information-end">
						{{invoiceInformation}}
					</view>
				</view>
			</view>
		</view>
		<view class="order-information">
			<view class="order-information-title">
				订单信息
			</view>
			<view class="order-number-box">
				<view class="order-number-content">
					订单编号
				</view>
				<view class="order-number-title">
					<view class="order-number">
						{{orderNumber}} <text>|</text>
					</view>
					<view class="Number-duplication" @tap="copyOrderNumber">
						复制
					</view>
				</view>
			</view>
			<view class="Order-snapshot-box">
				<view class="Order-snapshot-content">
					订单快照
				</view>
				<view class="Order-snapshot-title">
					<view class="Order-snapshot-details">
						发生交易争议时，可作为判断依据
					</view>
					<image src="../../../static/Myimg/right.png" class="Order-snapshot-image" mode=""></image>
				</view>
			</view>
			<view class="Expand-More-box">
				<view class="Expand-More">
					展开更多
					<image src="../../../static/icon/icon0.png" class="bottom-image" mode=""></image>
				</view>
			</view>
		</view>
		<view class="Shopping-problems">
			<view class="Shopping-problems-title">
				<view class="Shopping-problems-content">
					购物遇到问题
				</view>
				<view class="Shopping-problems-end">
					<view class="More-questions">
						更多问题
					</view>
					<image src="../../../static/Myimg/right.png" class="right-image" mode=""></image>
				</view>
			</view>
			<view class="check-the-logistics">
				<view class="check-the-logistics-content">
					如何查询物流信息？
				</view>
				<view class="check-the-logistics-end">
					<image src="../../../static/Myimg/right.png" class="right-image" mode=""></image>
				</view>
			</view>
			<view class="Return-or-exchange">
				<view class="Return-or-exchange-content">
					如何申请退换货？
				</view>
				<view class="Return-or-exchange-end">
					<image src="../../../static/Myimg/right.png" class="right-image" mode=""></image>
				</view>
			</view>
			<view class="wrongly-send-oll">
				<view class="wrongly-send-oll-content">
					商品错发/破损/漏发怎么办?
				</view>
				<view class="wrongly-send-oll-end">
					<image src="../../../static/Myimg/right.png" class="right-image" mode=""></image>
				</view>
			</view>
			<view class="Contact-or-complain-the-seller">
				<view class="contact-seller">
					<image src="../../../static/TestImg/kefu.png" class="contact-seller-image" mode=""></image>
					联系卖家
				</view>
				<view class="fengge">
					|
				</view>
				<view class="Complaints-against-sellers">
					<image src="../../../static/TestImg/dingdan.png" class="Complaints-against-sellers-image" mode="">
					</image>
					投诉卖家
				</view>
			</view>
		</view>
		<view class="konggei"></view>
		<view class="order-bottom">
			<view class="Prompt-delivery" v-if="headline ==='待发货'" @click="promptDelivery">
				催发货
			</view>
			<view class="cancellation-of-order" v-if="headline ==='待发货'" @click="cancelOrder">
				取消订单
			</view>
			<view class="check-the-logistic-two" v-if="headline ==='已发货'">
				查看物流
			</view>
			<view class="confirm-receipt" v-if="headline ==='已发货'" @click="confirmReceipt">
				确认收货
			</view>
			<view class="Deleting-orders" v-if="headline ==='已收货'" @click="deleteOrder">
				删除订单
			</view>
			<view class="add-to-shopping-cart" v-if="headline ==='已收货'">
				加入购物车
			</view>
			<view class="To-evaluate" v-if="headline ==='已收货'">
				去评价
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				headline: "已收货",
				delivers: "发货信息",
				deliveryTime: "晚发必陪，最晚08月09日发货",
				merchantImage: "../../../static/Myimg/jz.jpg",
				merchantName: "绵羊旗舰店",
				orders: [{
					shopImage: '../../../static/Myimg/jz.jpg',
					priductName: "绵羊抽纸",
					productPrice: "8.8",
					attributes: "3层100抽*4包",
					shopCommodity: "1"
				}],
				actuallyPaidPrice: "8.8",
				StateOfGuarantee: "保障中",
				invoiceInformation: "确认收货后可开具发票",
				orderNumber: "098765432187654321"
			}
		},
		methods: {
			copyOrderNumber() {
				uni.setClipboardData({
					data: this.orderNumber,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('复制失败:', err);
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			returnOne() {
				uni.navigateBack({
					delta: 1
				})
			},
			promptDelivery() {
				uni.showToast({
					title: '已催发货', // 弹框内容
					icon: 'none', // 无图标
					mask: true, // 显示遮罩层
					duration: 1000, // 弹框显示时长（毫秒）
					position: 'bottom' // 弹框位置
				});

				// 一秒后执行的操作
				setTimeout(() => {
					uni.hideToast(); // 隐藏弹框
				}, 1000);
			},
			cancelOrder() {
				uni.showModal({
					title: '取消订单提示',
					content: '是否确认取消订单？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了“确认”按钮后的逻辑处理
							console.log('用户确认取消订单');
							// 这里可以执行取消订单的操作
						} else if (res.cancel) {
							// 用户点击了“取消”按钮后的逻辑处理
							console.log('用户取消操作');
						}
					}
				});
			},
			confirmReceipt() {
				uni.showModal({
					title: '确认收货',
					content: '请您确认是否收到订单商品？',
					showCancel: true, // 显示取消按钮
					cancelText: '取消', // 设置取消按钮文本
					confirmText: '确认', // 设置确认按钮文本
					success: (res) => {
						if (res.confirm) {
							// 用户点击了“确认”按钮后的逻辑处理
							console.log('用户确认收货');
							// 这里可以执行确认收货的操作
						} else if (res.cancel) {
							// 用户点击了“取消”按钮后的逻辑处理
							console.log('用户取消确认收货');
						}
					}
				});
			},
			deleteOrder() {
			        uni.showModal({
			            title: '确认删除',
			            content: '请您确认删除此订单？',
			            showCancel: true, // 显示取消按钮
			            cancelText: '取消', // 设置取消按钮文本
			            confirmText: '确认', // 设置确认按钮文本
			            success: (res) => {
			                if (res.confirm) {
			                    // 用户点击了“确认”按钮后的逻辑处理
			                    console.log('用户确认删除订单');
			                    // 这里可以执行删除订单的操作
			                } else if (res.cancel) {
			                    // 用户点击了“取消”按钮后的逻辑处理
			                    console.log('用户取消删除订单');
			                }
			            }
			        });
			    },
		}
	}
</script>

<style scoped>
	page {
		background-color: rgb(245, 245, 245);
	}

	.navigation-bar {
		background-color: white;
		width: 100%;
		height: 100rpx;
		position: fixed;
		top: 0;
	    z-index: 1000; /* 设置一个较高的z-index */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headline-box {
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.return-a {
		width: 60rpx;
		height: 60rpx;
	}

	.headlines {
		/* background-color: aqua; */
		font-size: 36rpx;
	}

	.extend-a {
		width: 60rpx;
		height: 60rpx;
		margin-right: 40rpx;
	}

	.konggei {
		width: 100%;
		height: 100rpx;
	}

	.shipping-information-box {
		width: 95%;
		height: 110rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 2.5%;
		border-radius: 40rpx;
	}

	.information-box {
		width: 30%;
		height: 100%;
		/* background-color: aquamarine; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.information-title {
		margin-right: 30rpx;
		font-size: 30rpx;
		color: rgb(185, 185, 185);
	}

	.order-box {
		width: 95%;
		background-color: white;
		margin-top: 20rpx;
		margin-left: 2.5%;
		border-radius: 30rpx;
	}

	.order-merchant {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.merchant-image {
		width: 60rpx;
		height: 60rpx;
		object-fit: cover;
		border-radius: 50%;
		border: 1rpx solid rgba(185, 185, 185, 0.4);
	}

	.merchant-name {
		margin-left: 10rpx;
	}

	.image-right {
		width: 40rpx;
		height: 40rpx;
		margin-top: 6rpx;
		margin-left: 5rpx;
	}

	.order-detail {
		width: 100%;
		height: 220rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.shop-image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}

	.order-all-box {
		width: 63%;
		height: 220rpx;
	}

	.shop-content,
	.commercial-specification-box,
	.Rules-of-delivery {
		width: 100%;
		height: 50rpx;
		/* background-color: aqua; */
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.shop-content-title,
	.commercial-specification {
		width: 75%;
		height: 100%;
		line-height: 50rpx;
		/* background-color: aliceblue; */
		overflow: hidden;
		/* 隐藏超出容器的部分 */
		white-space: nowrap;
		/* 防止文本换行 */
		text-overflow: ellipsis;
		/* 当文本溢出时显示省略号 */
	}

	.priduct-price {
		width: 25%;
		height: 100%;
		line-height: 50rpx;
		text-align: center;
		/* background-color: aquamarine; */
	}

	.commercial-specification {
		font-size: 28rpx;
		color: rgb(185, 185, 185);
	}

	.quantity-of-commodity {
		font-size: 28rpx;
		color: rgb(185, 185, 185);
		width: 20%;
		height: 100%;
		line-height: 60rpx;
		text-align: end;
		margin-right: 20rpx;
	}

	.Quick-refund,
	.seven-days-no-reason-to-return,
	.A-late-start-pays-off {
		font-size: 20rpx;
		border: 1rpx solid rgba(185, 185, 185, 0.6);
		height: 30rpx;
		width: 85rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.seven-days-no-reason-to-return {
		width: 140rpx;
	}

	.actually-paid-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: end;

	}

	.actually-paid-title {
		height: 100%;
		width: 40%;
		/* background-color: aquamarine; */
		display: flex;
		justify-content: end;
		margin-right: 20rpx;
		align-items: center;
	}

	.actually-paid-price {
		color: red;
	}

	.bottom-image {
		width: 30rpx;
		height: 30rpx;
		/* background-color: aqua; */
		margin-bottom: 20rpx;
		margin-left: 5rpx;
	}

	.service-assurance {
		width: 95%;
		border-radius: 30rpx;
		margin-left: 2.5%;
		margin-top: 20rpx;
		background-image: url(../../../static/Myimg/xt.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		/* background-attachment: fixed; */
		background-color: antiquewhite;
		background-size: cover;
	}

	.service-assurance-image {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-top: 30rpx;
		margin-right: 10rpx;
	}

	.service-assurance-title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
		display: flex;

		/* background-color: antiquewhite; */
	}

	.service-assurance-box {
		width: 100%;
		height: 182rpx;
		border-radius: 30rpx;
		background-color: white;
	}

	.late-start-pays-off-box,
	.invoice-information-box {
		width: 100%;
		height: 91rpx;
		display: flex;
		/* background-color: antiquewhite; */
	}

	.late-start-pays-off-script,
	.invoice-information-script {
		width: 35%;
		height: 100%;
		/* background-color: aliceblue; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.late-start-pays-off-image {
		width: 30rpx;
		height: 30rpx;

		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.late-start-pays-off-end,
	.invoice-information-end {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: end;
		align-items: center;
		color: darkorange;
		margin-right: 20rpx;
		/* background-color: aquamarine; */
	}

	.invoice-information-end {
		color: black;
	}

	.order-information {
		width: 95%;
		background-color: white;
		margin-top: 20rpx;
		border-radius: 30rpx;
		margin-left: 2.5%;
	}

	.order-information-title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
	}

	.order-number-box,
	.Order-snapshot-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	.order-number-content,
	.Order-snapshot-content {
		width: 27%;
		height: 100%;
		/* background-color: aquamarine; */
		line-height: 80rpx;
		text-align: center;
	}

	.order-number-title,
	.Order-snapshot-title {
		width: 70%;
		height: 100%;
		/* background-color: blue; */
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.order-number {
		color: rgb(185, 185, 185);
		line-height: 80rpx;
	}

	.order-number text {
		color: rgba(185, 185, 185, 0.5);
		margin-left: 10rpx;
	}

	.Number-duplication {
		color: rgb(65, 105, 225);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.Order-snapshot-details {
		color: rgb(185, 185, 185);
		font-size: 30rpx;
		margin-right: 20rpx;
	}

	.Order-snapshot-image {
		width: 35rpx;
		height: 35rpx;
	}

	.Expand-More-box {
		width: 100%;
		height: 110rpx;
		display: flex;
		justify-content: center;
		/* background-color: aqua; */
	}

	.Expand-More {
		width: 30%;
		/* background-color: aquamarine; */
		color: rgb(185, 185, 185);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 25rpx;
		margin-left: -10rpx;
	}

	.Shopping-problems {
		width: 95%;
		background-color: white;
		margin-left: 2.5%;
		border-radius: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.Shopping-problems-title {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.Shopping-problems-content {
		width: 65%;
		height: 100%;
		line-height: 100rpx;
		margin-left: 40rpx;
	}

	.More-questions {
		color: rgb(185, 185, 185);
	}

	.Shopping-problems-end {
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		/* background-color: aqua; */
		justify-content: center;
	}

	.check-the-logistics,
	.Return-or-exchange,
	.wrongly-send-oll {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
	}

	.right-image {
		height: 40rpx;
		width: 40rpx;
		margin-top: 5rpx;
		margin-left: 15rpx;
	}

	.check-the-logistics-content,
	.Return-or-exchange-content,
	.wrongly-send-oll-content {
		width: 65%;
		height: 100%;
		line-height: 60rpx;
		margin-left: 40rpx;
		color: rgb(185, 185, 185);
	}

	.check-the-logistics-end,
	.Return-or-exchange-end,
	.wrongly-send-oll-end {
		width: 20%;
		height: 100%;
		/* background-color: aqua; */
		text-align: end;
		line-height: 60rpx;
		margin-right: 20rpx;
	}

	.Contact-or-complain-the-seller {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.contact-seller,
	.Complaints-against-sellers {
		width: 49%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contact-seller-image,
	.Complaints-against-sellers-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.fengge {
		width: 2%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(235, 235, 235);
	}

	.order-bottom {
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		justify-content: end;
		align-items: center;
		position: fixed;
		bottom: 0;
	}

	.cancellation-of-order,
	.Prompt-delivery,
	.check-the-logistic-two,
	.confirm-receipt,
	.Deleting-orders,
	.add-to-shopping-cart,
	.To-evaluate {
		width: 180rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border: 1rpx solid rgb(235, 235, 235);
		line-height: 80rpx;
		border-radius: 40rpx;
		/* background-color: antiquewhite; */
		text-align: center;
	}

	.Prompt-delivery,
	.To-evaluate {
		width: 120rpx;
	}

	.add-to-shopping-cart {
		width: 200rpx;
	}
</style>